<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>呈瑞制氧</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="css/payPage.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="conBox">
            <img src="./image/payImg/chengRuiLogo.png" alt="">
            <div class="listCon">
                <span>套餐选择</span>
                <div v-for="(item,index) in list" :key="index"
                    :class="item.isCheck?'isActive itemCon dis':'itemCon dis'" @click="selectHandle(index)">
                    <div class="leftCon">
                        <img :src="item.isCheck?item.img1:item.img2" alt="">
                        <span>{{item.title}}</span>
                    </div>
                    <div class="rightCon">
                        <div>
                            <span>￥</span>{{item.money}}
                        </div>
                        <span>{{item.minute}}分钟体验</span>
                        <img :src="item.isCheck?'./image/payImg/success11.png':'./image/payImg/success1.png'" alt="">
                    </div>
                    <img :src="item.bg" alt="" :class="item.isCheck?'showImg':''">
                </div>
                <img src="./image/payImg/payBg.png" alt="">
            </div>
        </div>
        <div class="payHandle dis">
            <div @click="payHandle">立即支付</div>
        </div>

        <div class="successBox" v-if="isSuccess">
            <div class="imgBox">
                <img src="./image/payImg/successBg.png" alt="">
            </div>
            <div class="diaBox">
                <div class="succIcon">
                    <img src="./image/payImg/successIconBg.png" alt="">
                    <img src="./image/payImg/dui2.png" alt="">
                </div>
                <span class="sucTip">支付完成</span>
                <div class="tipBox">
                    <div v-for="(item,index) in tips" :key='index'>
                        <img src="./image/payImg/dui1.png" alt="">{{item}}
                    </div>
                    <img src="./image/payImg/tipBg.png" alt="">
                </div>
            </div>
            <div class="infoBox">
                <span>费用总计</span>
                <div><span>￥</span>{{selectItem.money}}</div>
                <div @click="finishHandle">完成</div>
            </div>
        </div>

        <div class="loading" v-if="isShow">
            <img src="../img/load.gif" alt="">
        </div>
    </div>

    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/url.js" type="span/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script type="span/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>


        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var code = GetQueryString("code");
        var state = GetQueryString("state");


        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: false,
                list: [{
                    title: '缓解精神紧张',
                    money: '9.9',
                    minute: '10',
                    img1: './image/payImg/icon1.png',
                    img2: './image/payImg/icon11.png',
                    isCheck: false,
                    bg: './image/payImg/bg1.png',
                },
                {
                    title: '提高睡眠质，增加注意力',
                    money: '19.9',
                    minute: '20',
                    img1: './image/payImg/icon2.png',
                    img2: './image/payImg/icon22.png',
                    bg: './image/payImg/bg2.png',
                    isCheck: false,
                }, {
                    title: '养生保健',
                    money: '29.9',
                    minute: '30',
                    img1: './image/payImg/icon3.png',
                    img2: './image/payImg/icon33.png',
                    isCheck: false,
                    bg: './image/payImg/bg3.png',
                }
                ],
                tips: [
                    '增强细胞代谢', '促进伤口愈合', '增强免疫力', '提高睡眠质量', '有效治疗哮喘', '预防心脑血管疾病'
                ],
                isSuccess: false,
                selectItem: {
                    money: ''
                },
                createTime: '',//设备开始时间
                package: {
                    time: 15,
                    price: 1,
                    coins: 1
                },//设备 相关信息
            },
            created() {


                console.log(this.strHandle(1));
                this.getNowDate()

                console.log(this.getNowDate());
            },
            methods: {

                // 选择套餐
                selectHandle(index) {
                    this.list.forEach((ele, eIndex) => {
                        ele.isCheck = eIndex == index
                    })
                    console.log(this.list);
                },
                // 支付
                payHandle() {
                    var selectArr = this.list.filter(item => {
                        return item.isCheck
                    });

                    if (selectArr.length == 0) {
                        this.$toast('请选择套餐')
                        return
                    }

                    this.$toast('已选择套餐' + selectArr[0].title)

                    this.selectItem = selectArr[0]
                    this.isSuccess = true

                    this.createTime = this.getNowDate()
                    this.package = {
                        time: this.selectItem.minute,
                        price: this.selectItem.money,
                        coins: 1,
                    }

                    console.log(this.selectItem);
                    console.log(this.createTime);
                    console.log(this.package);
                    ajax({
                        type: "post",
                        url: newUrl + "pay/wxRechargeProductPay",
                        data: {
                            flag: 0,  // 微信支付 
                            openId: sessionStorage.openId,
                            shareId: sessionStorage.shareId,
                            productId: that.product_id,
                            shopId: sessionStorage.shopId,
                            userId: sessionStorage.userId,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            console.log(res);
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.isShow = false
                                console.log(res);
                                onBridgeReady(res.data)
                            }
                        }
                    })
                },


                startHandle() {
                    var that = this;
                    // ajax({
                    //     type: "post",
                    //     url: "https://www.washpayer.com/api/v1/device/start",
                    //     data: {
                    //         deviceCode: '',
                    //         sign: '',
                    //         channel: '',
                    //         extOrderNo: '',
                    //         createTime: that.createTime,
                    //         package: that.package,
                    //     },
                    //     header: {
                    //         'Content-Type': 'application/json',
                    //         'Authorization': 'Basic MTU2MDM1OTYzNDU6aHVhbmcw==',
                    //         'Sign': '4tTPuWqy0UK0e7dIOkdyGMv4jhZsfgnL'
                    //     },
                    //     dataType: 'json',
                    //     timeout: 10000,
                    //     success: function (res) {
                    //         console.log(res);
                    //     }
                    // })
                },

                strHandle(str) {
                    // 对字符串进行编码
                    var encode = encodeURI(str);
                    // 对编码的字符串转化base64
                    var base64 = btoa(encode);
                    return base64;

                },
                // 支付成功 完成
                finishHandle() {
                    this.selectItem = ''
                    this.isSuccess = false
                },
                // 格式化日对象
                getNowDate() {
                    var date = new Date();
                    var sign2 = ":";
                    var year = date.getFullYear() // 年
                    var month = date.getMonth() + 1; // 月
                    var day = date.getDate(); // 日
                    var hour = date.getHours(); // 时
                    var minutes = date.getMinutes(); // 分
                    var seconds = date.getSeconds() //秒
                    // 给一位数的数据前面加 “0”
                    if (month >= 1 && month <= 9) {
                        month = "0" + month;
                    }
                    if (day >= 0 && day <= 9) {
                        day = "0" + day;
                    }
                    if (hour >= 0 && hour <= 9) {
                        hour = "0" + hour;
                    }
                    if (minutes >= 0 && minutes <= 9) {
                        minutes = "0" + minutes;
                    }
                    if (seconds >= 0 && seconds <= 9) {
                        seconds = "0" + seconds;
                    }
                    return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
                }
            }
        })

        function wxPayHandle() {
            // 检测支付环境中的 WeixinJSBridge
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        }

        function onBridgeReady(data) {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                "appId": data.appId, //公众号名称，由商户传入
                "timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
                "nonceStr": data.nonceStr, //随机串
                "package": data.package,
                "paySign": data.paySign, //微信签名
                "signType": data.signType //微信签名方式：
            },
                function (res) {
                    // 支付成功
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        alert('支付成功,打开制氧机')
                        vm.startHandle()
                    }
                    // 支付过程中用户取消
                    if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        alert('已取消支付')
                    }
                    // 支付失败
                    if (res.err_msg == "get_brand_wcpay_request:fail") {
                        alert('支付失败')
                    }
                    if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
                    }
                });
        }
    </script>

</body>

</html>